<template>
    <div>
        <el-dialog title="添加个人党费" :visible.sync="dialogVisible" width='450px' append-to-body v-dialogDrag :close-on-click-modal="false" >
            <div>
                <el-form ref="rowdata" :model="rowdata" label-width="100px" class="personeditform" :rules="rules" status-icon>
                    <el-form-item label="年份" >
                        <el-input v-model="year" placeholder="请输入内容" :disabled="true"  style="margin-left: 30px;width: 120px;">
                            <template slot="append">年</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="月份" prop="months">
                        <el-select v-model="rowdata.months" placeholder="请选择"  multiple>
                            <el-option v-for="item in 12" :key="item" :label="item+'月'" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="缴纳人" prop="personid">
                        <el-select v-model="rowdata.personid" placeholder="请选择缴纳人" @change="changeperson">
                            <el-option v-for="item in showpersons" :key="item.personid" :label="item.truename" :value="item.personid">
                                <span style="float: left">{{ item.truename }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.personid }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                     <el-form-item label="月应交数" prop="needJiao">
                        <el-input v-model="rowdata.needJiao" style="width: 80%;"></el-input>
                    </el-form-item>
                     <el-form-item label="月实交数" prop="trueJiao">
                        <el-input v-model="rowdata.trueJiao" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="月缴纳时间" prop="time" v-if="this.rowdata.months.length<=1">
                        <el-date-picker v-model="rowdata.time" type="date" placeholder="" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="缴纳时间"  v-if="this.rowdata.months.length>1">
                        <span >将默认每个月28日缴纳</span>
                    </el-form-item>
                </el-form>
                <el-row style="position: relative;width: 100%;">
                    <el-button style="margin: 0 auto;display: block;" type="primary" icon="el-icon-search"  @click="qrcode" v-if="(isPerson==true && zhifuOK==false)">在线支付</el-button>

                    <el-button style="margin: 0 auto;display: block;"  type="primary" @click="checksubmit('rowdata')" v-if="zhifuOK==true ">确定
                        <i class="el-icon-upload el-icon--right" ></i>
                    </el-button>
                </el-row>
            </div>
            <qrcodev ref='qrcodev' v-on:zhifu="editResult"></qrcodev>
        </el-dialog>
    </div>
</template>
<script>
    import {mapActions} from 'vuex';
    // import qrcodev from "./qrcodev.vue"
    export default {
        data() {
            return { 
                dialogVisible: false, 
                year:-1,
                rowdata:{
                    truename:'',
                    personid:'',
                    needJiao:'',
                    trueJiao:'',
                    time:'',
                    months:[],
                },
                showpersons:[],
                rules: {
                    months: [{ required: true, message: '不能为空', trigger: 'blur' }],
                    personid: [{ required: true, message: '不能为空', trigger: 'blur' }],
                    needJiao: [{ required: true, message: '不能为空', trigger: 'blur' }],
                    trueJiao: [{ required: true, message: '不能为空', trigger: 'blur' }],
                    time: [{ required: true, message: '不能为空', trigger: 'blur' }],
                },
                isPerson:false,
                zhifuOK:false,
            };
            
        },
        mounted() {  
           
        },
        components: {qrcodev: function(resolve) {require(["./qrcodev.vue"], resolve);},},
        watch: {
            dialogVisible: function (n) {
                if (n == true) {
                    let _this=this;  
                    if(this.$store.state.user.operation==3){
                        _this.showpersons=[];
                         _this.showpersons.push({
                            truename:this.$store.state.user.truename,
                            personid:this.$store.state.user.phone
                        });
                        this.isPerson=true
                        this.zhifuOK=false
                    }
                    else
                    {
                        this.isPerson=false
                        this.zhifuOK=true
                        this.GetPersons()
                        .then(function(data){
                            _this.showpersons=[];
                            for (let index = 0; index < data.length; index++) {
                                const element = data[index];
                                _this.showpersons.push({
                                    truename:element.truename,
                                    personid:element.personID
                                });
                            }
                        }).catch(function(reason) {
                            console.log('catch:', reason);
                        });
                    }
                    this.rowdata={
                        truename:'',
                        personid:'',
                        needJiao:'',
                        trueJiao:'',
                        time:'',
                        months:[]
                    }
                    this.monthb=false;
                }
            },
        },
        methods: {
            ...mapActions(['GetPersons']),
            changeperson(personid)
            {
                this.rowdata.truename=this.showpersons.filter(function(value){
                    return value.personid==personid;
                })[0].truename;
            },
            checksubmit(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.uploadToServe();
                    } 
                    else {
                        this.$message("请填写必要信息");
                        return false;
                    }
                });
            },
            uploadToServe(){
                let thatrowdata=[];
                if( this.rowdata.months.length==1){
                    thatrowdata.push({
                        year:this.year,
                        month:element,
                        truename:this.rowdata.truename,
                        personid:this.rowdata.personid,
                        needJiao:this.rowdata.needJiao,
                        trueJiao:this.rowdata.trueJiao,
                        time:this.rowdata.time,
                    });
                }
                else{
                    for (let index = 0; index < this.rowdata.months.length; index++) {
                        const element = this.rowdata.months[index];
                        let OneRow={
                            year:this.year,
                            month:element,
                            truename:this.rowdata.truename,
                            personid:this.rowdata.personid,
                            needJiao:this.rowdata.needJiao,
                            trueJiao:this.rowdata.trueJiao,
                            time:this.year+'-'+element+'-28',
                        }
                        thatrowdata.push(OneRow);
                    }
                }
                this.$emit('editResult',JSON.parse(JSON.stringify(thatrowdata)));
                this.dialogVisible=false;
            },
            editResult(status){
                this.zhifuOK=status;
            },
            qrcode(){
                this.$refs.qrcodev.$data.dialogVisible = true;
            },
            
        },

    }
</script>
<style>
</style>